<template>
  <div>
    <!-- 引入动态表格组件 -->
    <DynamicTable 
      :table-data="userList" 
      :columns="tableColumns" 
      @row-click="handleRowClick" 
      @edit="handleEdit"
      @delete="handleDelete" />
  </div>
</template>

<script>
import DynamicTable from './DynamicTable.vue';
export default {
  components: {
    DynamicTable
  },
  data() {
    return {
      // 表格数据（模拟接口返回）
      userList: [
        { id: 1, username: '张三', age: 25, status: 1, createTime: '2024-01-10 09:30' },
        { id: 2, username: '李四', age: 32, status: 0, createTime: '2024-02-15 14:20' }
      ],
      // 列配置（自定义表头、字段、格式）
      tableColumns: [
        { label: 'ID', prop: 'id', width: '80' },
        { label: '用户名', prop: 'username', width: '120' },
        { label: '年龄', prop: 'age', width: '80' },
        // 自定义渲染：状态转换（1→启用，0→禁用）
        {
          label: '状态',
          prop: 'status',
          width: '100',
          render: (row) => {
            return row.status === 1 
              ? '<span style="color:#67c23a">启用</span>' 
              : '<span style="color:#999">禁用</span>'
          }
        },
        // 自定义渲染：时间格式化
        {
          label: '创建时间',
          prop: 'createTime',
          width: '180',
          render: (row) => {
            // 简单格式化（实际项目可用moment.js）
            return row.createTime.split(' ').join('<br>')
          }
        }
      ]
    }
  },

    methods: {
    handleRowClick(row) {
      console.log('点击行数据：', row)
    },
    handleEdit(row) {
      alert(`编辑用户：${row.username}`)
    },
    handleDelete(row) {
      if (confirm(`确定删除用户 ${row.username} 吗？`)) {
        // 调用删除接口逻辑...
        this.userList = this.userList.filter(item => item.id !== row.id)
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>